<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="panel panel-default"><!--可替代panel-default的类：panel-primary，panel-success，panel-info，panel-warning，panel-danger-->
 <div class="panel-heading">
  <h3 class="panel-title">
   带有 title 的面板标题
  </h3>
 </div>
 <div class="panel-body">
  面板内容
 </div>
 <!---带表格-->
 <table class="table">
  <th>产品</th><th>价格 </th>
  <tr><td>产品 A</td><td>200</td></tr>
  <tr><td>产品 B</td><td>400</td></tr>
 </table>
 <!---带列表组-->
 <ul class="list-group">
  <li class="list-group-item">免费域名注册</li>
  <li class="list-group-item">免费 Window 空间托管</li>
  <li class="list-group-item">图像的数量</li>
  <li class="list-group-item">24*7 支持</li>
  <li class="list-group-item">每年更新成本</li>
 </ul>
  <div class="panel-footer">面板脚注</div>
</div>

<!--一般列表组-->
<ul class="list-group">
 <li class="list-group-item">免费域名注册</li>
 <li class="list-group-item">
  <span class="badge">新</span>
  24*7 支持
 </li>
 <li class="list-group-item">每年更新成本</li>
 <li class="list-group-item">
  <span class="badge">新</span>
  折扣优惠
 </li>
</ul>
<!--自定义列表组-->
<div class="list-group">
 <a href="#" class="list-group-item active">
  <h4 class="list-group-item-heading">
   入门网站包
  </h4>
 </a>
 <a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">
   免费域名注册
  </h4>
  <p class="list-group-item-text">
   您将通过网页进行免费域名注册。
  </p>
 </a>
 <a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">
   24*7 支持
  </h4>
  <p class="list-group-item-text">
   我们提供 24*7 支持。
  </p>
 </a>
</div>
<ul class="media-list">
 <li class="media">
  <a class="pull-left" href="#">
   <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
   alt="通用的占位符图像">
  </a>
  <div class="media-body">
   <h4 class="media-heading">媒体标题</h4>
   <p>这是一些示例文本。这是一些示例文本。 
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。</p>
   <!-- 嵌套的媒体对象 -->
   <div class="media">
   <a class="pull-left" href="#">
    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
    alt="通用的占位符图像">
   </a>
   <div class="media-body">
    <h4 class="media-heading">嵌套的媒体标题</h4>
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    <!-- 嵌套的媒体对象 -->
    <div class="media">
     <a class="pull-left" href="#">
      <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
      alt="通用的占位符图像">
     </a>
     <div class="media-body">
      <h4 class="media-heading">嵌套的媒体标题</h4>
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
     </div>
    </div>
   </div>
   </div>
   <!-- 嵌套的媒体对象 -->
   <div class="media">
   <a class="pull-left" href="#">
    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
    alt="通用的占位符图像">
   </a>
   <div class="media-body">
    <h4 class="media-heading">嵌套的媒体标题</h4>
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
   </div>
   </div>
  </div>
 </li>
 <li class="media">
  <a class="pull-right" href="#">
   <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
   alt="通用的占位符图像">
  </a>
  <div class="media-body">
   <h4 class="media-heading">媒体标题</h4>
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
  </div>
 </li>
</ul>
	</body>
</html>
